import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio, ScrollView
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js'
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import MethodUtil from '../../../utils/MethodUtil';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';

const scale = GLOBAL.SCALE;
export class CreditHistoryPage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: navigation.getParam('title', '历史记录'),
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerStyle: {
				elevation: 0,
				borderBottomWidth: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTintColor: '#fff',
		};
	};

	constructor(props) {
		super(props);
		this.state = {
			creditList: [],
			pageStatus: {
				status: 'loading'
			},
			offsetY: 0
		}
		const { params } = this.props.navigation.state;
		this.companyId = params.companyId;
		this.companyCode = params.companyCode;
		this.companyType = params.companyType;
	}

	componentWillMount () {
		this.getCredit();
	}

	async getCredit () {
		const creditList = await HTTP.GET(API_GENERATE(API.GET_CUSTOMER_CREDIT_HISTORY), {
			companyId: this.companyId,
			companyType: this.companyType
		});
		if (creditList && creditList.length > 0) {
			this.setState({
				creditList: creditList,
				pageStatus: {
					status: 'data'
				},
			})
		} else {
			this.setState({
				pageStatus: {
					status: 'empty',
					emptyText: '没有查到授信历史～'
				},
			})
		}
	}

	render () {
		const { creditList, pageStatus } = this.state;

		return (
			<ScrollView style={styles.scrollView} onScroll={(e) => {
				let offsetY = e.nativeEvent.contentOffset.y; //滑动距离
				this.setState({
					offsetY
				})
			}}>
				{
					pageStatus.status === 'data' ?
						creditList.map((item, index) => {
							const { companyName, creditApplyStatusName, creditApplyAmount, createBy, createTime, taskName, taskId, creditApplyId, creditKindName } = item;
							return (
								<TouchableOpacity key={index} activeOpacity={.5} style={styles.orderCell}
									onPress={() => {
										const { navigate } = this.props.navigation;
										navigate('ApprovePage',
											{
												paramsData: {
													goBack: 'EnterpriseDetailsPage',
													creditApplyId,
													taskName,
													taskId,
												},
												status: 'HASLOT',
											})
									}}>
									<View style={styles.order}>
										<View style={styles.orderHead}>
											<View style={styles.orderHeadLeft}>
												<Text style={styles.orderHeadText}>{companyName || '-'}</Text>
												{/* <Image source={conPic} style={styles.conImage} /> */}
												<Text style={styles.element}>{creditKindName}</Text>
											</View>
											<Text style={styles.statusText}>{creditApplyStatusName}</Text>
										</View>
										<View style={styles.orderMain}>
											<View style={styles.orderCol}>
												<Text style={styles.orderText}>新增授信金额：</Text>
												<Text style={styles.orderVal}>{('¥' + MethodUtil.toThousands(creditApplyAmount || 0)) + '元'}</Text>
											</View>
										</View>
										<View style={styles.orderMain}>
											<View style={styles.orderCol}>
												<Text style={styles.orderText}>申请人：</Text>
												<Text style={styles.orderVal}>{createBy || '-'}</Text>
											</View>
											<View style={styles.orderCol}>
												<Text style={styles.orderText}>申请时间：</Text>
												<Text style={styles.orderVal}>{createTime || '-'}</Text>
											</View>
										</View>
									</View>
								</TouchableOpacity>
							)
						})
						: <View style={{ position: 'absolute', height: GLOBAL.SCREEN_HEIGHT, width: GLOBAL.SCREEN_WIDTH, top: this.state.offsetY }}>
							<PageStatusIndex {...pageStatus} />
						</View>
				}

			</ScrollView>
		)
	}
}

const styles = StyleSheet.create({
	scrollView: {
		backgroundColor: style.color.bgGray,
	},
	orderCell: {
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginBottom: 12 * scale,
		// marginTop: 12 * scale,
	},
	order: {
		width: 351 * scale,
	},
	orderHead: {
		width: 351 * scale,
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
		height: 44 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
		marginBottom: 8 * scale
	},
	orderHeadLeft: {
		height: 44 * scale,
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 14 * scale,
		color: '#222',
		marginRight: 6 * scale,
		marginLeft: 6 * scale,
		flexWrap: 'wrap'
	},
	statusText: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
	},
	orderMain: {
		flexDirection: 'row',
		marginBottom: 8 * scale,
		flexWrap: 'wrap'
	},
	orderCol: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 25 * scale,
		width: 175.5 * scale,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000'
	},
	element: {
		fontSize: 10 * scale,
		backgroundColor: style.color.themeColor,
		color: '#fff',
		borderRadius: 3 * scale,
		paddingLeft: 2 * scale,
		paddingRight: 2 * scale
	}
})